<template>
	<div class="border-panel">
		<dv-border-box12
			ref="border"
			v-bind="styles"
			>
		</dv-border-box12>
	</div>
</template>

<script setup>
import { BorderBox12 as DvBorderBox12 } from "@kjgl77/datav-vue3";
import { ref, watch, onMounted } from "vue";

const props = defineProps({
	id: {
		type: String,
		default: ''
	},
	styles: {
		type: Object,
		default: () => {},
	},
	canvas: {
		type: Object,
		default: () => {}
	}
});
const border = ref()
onMounted(() => {
	watch(() => props.canvas, (n) => {
		border.value.initWH()
	}, {
		deep: true
	})
})
</script>
<style lang="scss" scoped>
.border-panel {
	width: 100%;
	height: 100%;
}
</style>
